<template>
  <Modal title="可选项目"
         width='580'
         :value="modalVisible"
         :transfer='false'
         @on-ok="volumeSet"
         @on-cancel="cancel"
         id='modal'>
    <Row type='flex'
         justify="space-between"
         align='middle'
         class="modal-content">
      <Col class='section'>
      <Row class='section-title'>
        <Row type='flex'
             justify="space-between"
             align='middle'
             class="section-count">
          <Col>
          <Checkbox @on-change="leftCheckAll" v-model="leftCheckAllStatus" v-if="leftSearching">选择项目</Checkbox>
          <span v-else>全部项目</span>
          </Col>
          <Col>{{ leftSearching ? leftSearchResult.length : dataTreeFormat.length }}</Col>
        </Row>
      </Row>
      <Row class="section-content">
        <Col><Input search
               placeholder="请输入搜索内容"
               v-model="OrgParmas.orgName"
               @on-keyup="filterSpace"
               :maxlength="100"
               @on-search="searchLeftShoplist"
               style="width:100%" /></Col>
        <Col class="content-show">
          <el-tree
            ref="elTree"
            :data="dataTree"
            v-show="!leftSearching"
            show-checkbox
            node-key="id"
            :default-checked-keys="defaultCheck"
            :props="treeDefaultProps">
          </el-tree>
          <div v-show="leftSearching">
            <ul class="selected-shop" v-if="leftSearchResult.length > 0">
              <li v-for="(item, index) in leftSearchResult"
                  :key='index'>
                <Checkbox v-model="item.checked"
                  @on-change="leftSelect(...arguments, index)"><span style="margin-left:5px">{{ item.orgName }}</span></Checkbox>
              </li>
            </ul>
            <div v-else>暂无数据</div>
          </div>
        </Col>
      </Row>
      </Col>
      <Col>
      <div>
        <div @click='cancelSelect'><Button icon="ios-arrow-back"></Button></div>
        <div style="margin-top:20px"
             @click='sureCheck'><Button icon="ios-arrow-forward"></Button></div>
      </div>
      </Col>
      <Col class="section">
      <Row class="section-title">
        <Row type='flex'
             justify="space-between"
             align='middle'
             class="section-count">
          <Col>
            <Checkbox v-model="rightCheckAllStatus" @on-change="rightCheckAll">已选项目</Checkbox>
          </Col>
          <Col>{{rightSelect.length}}</Col>
        </Row>
      </Row>
      <Row class="section-content">
        <Col><Input search
               v-model="rightSearchValue"
               placeholder="请输入搜索内容"
               @on-keyup="filterSpace"
               :maxlength="100"
               @on-search="rightSearchChange"
               style="width:100%" /></Col>
        <Col class="content-show">
        <ul class="selected-shop">
          <li v-for="(item, index) in rightSearchResult"
              :key='index'>
            <Checkbox v-model="item.checked"
              @on-change="rightSelectClick(...arguments, index)"><span style="margin-left:5px">{{ item.orgName }}</span></Checkbox>
          </li>
        </ul>
        </Col>
      </Row>
      </Col>
    </Row>
  </Modal>
</template>
<script>
export default {
  name: 'SelectShop',
  data () {
    return {
      OrgParmas: {
        orgName: ''
      },
      dataTreeFormat: [],
      leftSearching: false,
      leftCheckAllStatus: false,
      leftSearchResult: [],
      rightCheckAllStatus: false,
      rightSearchValue: '',
      rightSearchResult: [],
      rightSelect: [],
      modalVisible: this.modalShow,
      defaultCheck: [],
      treeDefaultProps: {
        children: 'childList',
        label: 'orgName'
      }
    }
  },
  props: {
    checkdList: {
      type: Array,
      default: () => []
    },
    dataTree: {
      type: Array,
      default: () => []
    },
    modalShow: {
      type: Boolean
    }
  },
  watch: {
    'OrgParmas.orgName' (val) {
      if (!val) {
        this.leftSearching = false
      }
    },
    rightSearchValue (val) {
      if (!val) {
        this.rightSearchResult = this.rightSelect.map(item => {
          return {
            ...item
          }
        })
        this.judgeRightCheckedStatus()
      }
    },
    rightSelectIds (val) {
      this.defaultCheck = val
      this.$refs.elTree.setCheckedNodes(val)
    },
    checkdList () {
      this.getDetail()
    }
  },
  computed: {
    rightSelectIds () {
      return this.rightSelect.map(item => item.id)
    },
    rightCheckIds () {
      return this.rightSearchResult.filter(item => item.checked).map(item => item.id)
    }
  },
  mounted () {
    this.lowerDimension(this.dataTree)
    this.getDetail()
  },
  methods: {
    filterSpace () {
      this.rightSearchValue = this.rightSearchValue.replace(/\s/g, '')
      this.OrgParmas.orgName = this.OrgParmas.orgName.replace(/\s/g, '')
    },
    getDetail () {
      this.rightSelect = this.checkdList.map(item => {
        return {
          ...item
        }
      })
      this.rightSearchChange()
    },
    searchLeftShoplist () {
      this.leftCheckAllStatus = false
      const orgName = this.OrgParmas.orgName
      if (orgName) {
        this.leftSearchResult = this.dataTreeFormat.filter(item => item.orgName.includes(orgName))
        this.leftSearching = true
        this.leftSearchResult.forEach(item => {
          if (this.rightSelectIds.includes(item.id)) {
            item.checked = true
          } else {
            item.checked = false
          }
        })
        this.judgeLeftCheckedStatus()
      }
    },
    leftSelect (ischecked, index) {
      this.leftSearchResult[index].checked = ischecked
      this.judgeLeftCheckedStatus()
    },
    judgeLeftCheckedStatus () {
      const len = this.leftSearchResult.length
      this.leftCheckAllStatus = !!len && len === this.leftSearchResult.filter(item => item.checked).length
    },
    leftCheckAll (ischecked) {
      this.leftSearchResult = this.leftSearchResult.map(item => {
        item.checked = ischecked
        return item
      })
    },
    rightSelectClick (ischecked, index) {
      this.rightSearchResult[index].checked = ischecked
      this.judgeRightCheckedStatus()
    },
    judgeRightCheckedStatus () {
      const len = this.rightSearchResult.length
      this.rightCheckAllStatus = !!len && len === this.rightSearchResult.filter(item => item.checked).length
    },
    rightCheckAll (ischecked) {
      this.rightSearchResult = this.rightSearchResult.map(item => {
        item.checked = ischecked
        return item
      })
    },
    rightSearchChange () {
      this.rightSearchResult = this.rightSelect.filter(item => item.orgName.includes(this.rightSearchValue))
      this.judgeRightCheckedStatus()
    },
    cancelSelect () {
      if (this.leftSearching) {
        this.leftSearchResult.forEach(item => {
          if (this.rightCheckIds.includes(item.id)) {
            item.checked = false
          }
        })
      }
      this.rightSelect = this.rightSelect.filter(item => !this.rightCheckIds.includes(item.id))
      this.rightSearchResult = this.rightSearchResult.filter(item => !this.rightCheckIds.includes(item.id))
      this.judgeLeftCheckedStatus()
      this.judgeRightCheckedStatus()
    },
    sureCheck () {
      let deleteIds = []
      let addIndex = []
      let treeSelects = []
      if (this.leftSearching) {
        treeSelects = this.leftSearchResult
        const rightAllIds = this.rightSelect.map(item => item.id)
        this.leftSearchResult.forEach((item, index) => {
          if (rightAllIds.includes(item.id)) {
            if (!item.checked) {
              deleteIds.push(item.id)
            }
          } else if (item.checked) {
            addIndex.push(index)
          }
        })
      } else {
        treeSelects = this.$refs.elTree.getCheckedNodes().filter(item => item.orgType === 1)
        const rightAllIds = this.rightSelect.map(item => item.id)
        const treeSelectIds = treeSelects.map(item => item.id)
        const leftNotCheckIds = this.dataTreeFormat.map(val => val.id).filter(val => !treeSelectIds.includes(val))
        treeSelects.forEach((item, index) => {
          if (rightAllIds.includes(item.id)) {
            if (leftNotCheckIds.includes(item.id)) {
              deleteIds.push(item.id)
            }
          } else {
            addIndex.push(index)
          }
        })
      }
      for (let i = this.rightSelect.length - 1; i >= 0; i--) {
        const id = this.rightSelect[i].id
        if (deleteIds.includes(id)) {
          this.rightSelect.splice(i, 1)
        }
      }
      addIndex.forEach(item => {
        this.rightSelect.push(treeSelects[item])
      })
      this.rightSelect = this.rightSelect.map(item => {
        const obj = { ...item }
        obj.checked = false
        return obj
      })
      this.rightSearchChange()
    },
    lowerDimension (arr) {
      arr.forEach(item => {
        if (Array.isArray(item.childList) && item.childList.length) {
          this.lowerDimension(item.childList)
        } else if (item.orgType === 1) {
          this.dataTreeFormat.push(item)
        }
      })
    },
    volumeSet () {
      this.$emit('selctshop', this.rightSelect)
    },
    cancel () {
      this.$emit('oncancel')
    }
  }
}
</script>
<style lang="less">
#modal {
  .modal-content {
    padding: 0 10px;
    .section {
      border: 1px solid #e8eaec;
      width: 230px;
      height: 286px;
      border-radius: 6px;
      overflow: hidden;
      .section-title {
        background: #f9fafc;
        .section-count {
          height: 36px;
          border-bottom: 1px solid #e8eaec;
          padding: 0 24px;
        }
      }
      .section-content {
        padding: 8px 12px;
        height: 248px;
        .content-show {
          width: 100%;
          margin-top: 10px;
          padding-bottom: 10px;
          height: 200px;
          overflow: auto;
          .selected-shop {
            li {
              list-style: none;
              margin-top: 11px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .ivu-btn-text {
    border: 1px solid #e8eaec;
  }
  .el-tree-node > .el-tree-node__children {
    overflow: inherit;
  }
  .el-tree-node__label {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    font-size: 12px
  }
  .el-tree-node__content {
    background: #fff;
    &:hover {
      background: #FFF
    }
  }
  .el-tree-node.is-current {
    background: #FFF
  }
}
</style>
